<template>
  <div>
    <!-- 搜索 -->
    <el-form :model="formItem"  label-width="80px" :inline="true" class="demo-form-inline">
      <el-form-item label="关键字">
        <el-input v-model="formItem.name" placeholder="广告位"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchSubmit('formItem')">搜索</el-button>
      </el-form-item>
    </el-form>
    <div style="margin-bottom: 10px;">
      <el-button @click="serviceAdd()" type="primary" size="mini">添加</el-button>
      <el-button @click.native="deleteAll()" type="danger" size="mini">删除</el-button>
    </div>
    <el-table ref="selection" :data="listData" border style="width: 100%" @selection-change="select">
      <el-table-column fixed type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="名称" width="200"></el-table-column>
      <el-table-column prop="num" label="数量" width="300"></el-table-column>
      <el-table-column prop="width" label="建议宽度" width="200">
        <template slot-scope="scope">{{ scope.row.width }}px</template>
      </el-table-column>
      <el-table-column prop="height" label="建议高度" width="200">
        <template slot-scope="scope">{{ scope.row.height }}px</template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="320">
        <template slot-scope="scope">
          <el-button @click.native.prevent="serviceEdit(scope.$index)" type="primary" size="mini">编辑</el-button>
          <el-button @click.native.prevent="del(scope.$index)" type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="text-align : right; float : right; margin-top: 10px;">
      <!--<span class="demonstration">完整功能</span>-->
      <el-pagination
              @size-change="handlePageSize"
              @current-change="handlePage"
              :current-page="pageNum"
              :page-sizes="[10, 50, 100, 200]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageTotal">
      </el-pagination>
    </div>
    <!-- 活动添加修改 -->
    <el-dialog :visible.sync="positionAdd" :title="titleStr" width="500px">
      <el-form ref="activity" :model="formAdd" :rules="formAddValidate" label-width="100px" class="demo-ruleForm">
        <el-form-item label="广告位名称" prop="name">
          <el-input v-model="formAdd.name" style="width:300px;"  placeholder="请输入广告位名称"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="num">
          <el-input-number v-model="formAdd.num" :min="1" :max="10000" style="width:300px;"></el-input-number>
        </el-form-item>
        <el-form-item label="建议宽度" prop="width">
          <el-input v-model="formAdd.width" style="width:300px;"  placeholder="请输入建议宽度">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="建议高度" prop="height">
          <el-input v-model="formAdd.height" style="width:300px;"  placeholder="请输入建议宽度">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.native="addSubmit('formAdd')">提交</el-button>
          <el-button @click="addCancel()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import axios from "@/axios";
  import { isIntNum } from "@/assets/js/common";
  export default {
    data() {
      return {
        titleStr: "",
        formItem: {
          name: "",
        },
        formAdd: {
          name: "",
          width: "",
          height: "",
          num: 1
        },
        formAddValidate: {
          name: [
            {
              required: true,
              message: "名称不能为空",
              trigger: "blur"
            }
          ],
          num: [{
            type: 'number',
            required: true,
            message: "数量不能为空",
            trigger: "change"
          }],
        },
        positionAdd:false,
        listData: [],
        ids:[],
        pageTotal: 0,
        pageNum: 1,
        pageSize: 10,
      };
    },

    mounted() {
      this.getList();
    },
    methods: {
      //获取勾选参数
      select(val) {
        let vm = this;
        vm.ids = [];
        for (let i in val) {
          vm.ids.push(val[i].id);
        }
      },
      // 批量删除
      deleteAll() {
        let vm = this;
        if (vm.ids.length < 1) {
          vm.$message.error("请勾选数据！");
          return false;
        }
        this.$confirm("是否确认删除吗？", "确认删除" , {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios
            .post("/admin/adv/position/delete", {
              ids: vm.ids
            })
            .then(response => {
              let status = response.status;
              let data = response.data;
              if (data.code == 200) {
                vm.$Message.success({
                  content: "操作成功!",
                  onClose: function(msg) {
                    vm.getList();
                    vm.id = [];
                  }
                });
              } else {
                vm.$Message.error(data.message);
              }
            })
            .catch(error => {
              //vm.$Message.info("网络或服务器异常");
            });
          }).catch(() => {
            vm.ids = [];
            this.$refs.selection.selectAll(false);
          });
      },
      //搜索
      searchSubmit() {
        this.pageNum = 1;
        this.getList();
      },
      //当前页数
      handlePage(value) {
        this.pageNum = value;
        this.getList();
      },
      //每页显示条数
      handlePageSize(value) {
        this.pageSize = value;
        this.getList();
      },
      //获取角色列表
      getList() {
        let vm = this;
        axios
          .post("/admin/adv/position/get-lists", {
            page: this.pageNum,
            limit: this.pageSize,
            name: this.formItem.name
          })
          .then(response => {
            let data = response.data;
            if (data.code == 200) {
              let result = data.data;
              vm.pageTotal = result.total;
              vm.listData = result.list;
            } else {
              vm.$message.info(data.message);
            }
          })
          .catch(error => {
            // vm.$Message.info("网络或服务器异常");
          });
      },
      //删除
      del: function(index = "") {
        let vm = this;
        vm.ids = [];
        //判断单条多条操作
        if (!isIntNum(index)) {
          vm.ids.push(vm.listData[index].id);
        } else {
          if (vm.ids.length < 1) {
            vm.$message.error("请勾选数据！");
            return false;
          }
        }

        this.$confirm("是否确认删除吗？", "确认删除" , {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            axios
              .post("/admin/adv/position/delete", {
                ids: vm.ids
              })
              .then(response => {
                let status = response.status;
                let data = response.data;
                if (data.code == 200) {
                  vm.$message({
                    type: 'success',
                    content: "操作成功!",
                    onClose: function(msg) {
                      vm.getList();
                      vm.ids = [];
                    }
                  });
                } else {
                  vm.$message.error(data.message);
                }
              })
              .catch(error => {
                //vm.$Message.info("网络或服务器异常");
              });
          }).catch(error=>{
            vm.ids = [];
            this.$refs.selection.selectAll(false);
          });
      },
      // 添加框取消
      addCancel() {
        this.positionAdd = false;
        this.formAdd.id = "";
        this.formAdd.name = "";
        this.formAdd.num = 1;
        this.formAdd.width = "";
        this.formAdd.height = "";
      },
      // 添加处理
      addSubmit(name) {
        let vm = this;
        // console.log(this.checkAllId);
        this.$refs.activity.validate(valid => {
          if (valid) {
            axios
              .post("/admin/adv/position/store", vm.formAdd)
              .then(response => {
                let status = response.status;
                let data = response.data;
                if (data.code == 200) {
                  vm.positionAdd = false;
                  vm.formAdd.id = "";
                  vm.formAdd.name = "";
                  vm.formAdd.num = 1;
                  vm.formAdd.width = "";
                  vm.formAdd.height = "";
                  vm.$message({
                    type: 'success',
                    message: "操作成功!",
                    onClose: function (msg) {
                      vm.getList();
                    }
                  });
                } else {
                  vm.$message.error(data.message);
                }
              })
              .catch(error => {
                // vm.$Message.error("网络或服务器异常");
              });
          } else {
            // vm.$Message.error("Fail!");
          }
        });
      },
      // 添加
      serviceAdd() {
        let vm = this;
        vm.titleStr = '添加';
        vm.positionAdd = true;
      },
      // 编辑
      serviceEdit(index) {
        let vm = this;
        vm.titleStr = '编辑';
        vm.formAdd.id = vm.listData[index].id;
        vm.formAdd.name = vm.listData[index].name;
        vm.formAdd.num = vm.listData[index].num;
        vm.formAdd.width = vm.listData[index].width;
        vm.formAdd.height = vm.listData[index].height;
        vm.positionAdd = true;
      },
    }
  };
</script>